
//从@vueuse/core中导入useIntersectionObserver函数
//useIntersectionObserver：提供对元素是否可见进行观察的功能，可用于实现懒加载等效果。
//通过使用useIntersectionObserver这个函数，来自定义一个懒加载指令。
import { useIntersectionObserver } from "@vueuse/core";

// 编写一个插件LazyPlugin
export const LazyPlugin = {
	install(app, options) {
		// 注册指令
		app.directive('img-lazy', {
			mounted(el, binding) {
				el.src = "@/assets/images/loading.gif";
				const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
					// 判断当前监听元素是否进入视口区域
					if (isIntersecting) {
						el.src = binding.value;						
						//在监听的图片第一次完成加载后就停止监听
						stop();
					}
				})
			}
		})
	}
}
